<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
                @change="depIdChange"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">设备分类：</label>
            <el-input
                v-model="searchForm.facilitySort"
                placeholder="请输入设备分类"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备地点：</label>
            <el-input
                v-model="searchForm.facilityLocations"
                placeholder="请输入设备地点"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备名称：</label>
            <el-input
                v-model="searchForm.facilityName"
                placeholder="请输入设备名称"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">设备状态：</label>
            <el-select
                v-model="searchForm.facilityState"
                class="m-2"
                placeholder="请选择设备状态"
                style="width: 145px"
            >
                <el-option
                    v-for="item in facilityStateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">设备分级：</label>
            <el-select
                v-model="searchForm.facilityLevel"
                class="m-2"
                placeholder="请选择设备分级"
                style="width: 145px"
            >
                <el-option
                    v-for="item in facilityLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">规格型号：</label>
            <el-input
                v-model="searchForm.specificationModel"
                placeholder="请输入规格型号"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">供应商/厂家：</label>
            <el-input
                v-model="searchForm.facilitySupplier"
                placeholder="请输入供应商/厂家"
                style="width: 145px"
            />
        </div>
        <div class="filter-item">
            <label for="">资产编号：</label>
            <el-input
                v-model="searchForm.assetNumber"
                placeholder="请输入资产编号"
                style="width: 145px"
            />
        </div>

        <div class="filter-item">
            <label for="">标签名称：</label>
            <el-select
                v-model="searchForm.tagName"
                class="m-2"
                placeholder="请选择标签名称"
                style="width: 145px"
                clearable
            >
                <el-option
                    v-for="item in labelList"
                    :key="item.tagName"
                    :label="item.tagName"
                    :value="item.tagName"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="search"
            >查询</el-button>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>
    <div class="options">
        <div class="overview">
            <!-- 设备概括 -->
            <el-tag
                class="ml-2"
                size="large"
            >设备总数({{ equipmentOverview.total }})</el-tag>
            <el-tag
                class="ml-2"
                size="large"
                type="success"
            >正常({{ equipmentOverview.useCount }})</el-tag>
            <el-tag
                class="ml-2"
                size="large"
                type="info"
            >备用({{ equipmentOverview.standbyCount }})</el-tag>
            <el-tag
                class="ml-2"
                size="large"
                type="warning"
            >维修({{ equipmentOverview.repairCount }})</el-tag>
            <el-tag
                class="ml-2"
                size="large"
                type="danger"
            >已报废({{ equipmentOverview.scrapCount }})</el-tag>
        </div>
        <div class="choiceListNumb">
            <span>已选: {{ multipleSelection.length || 0 }} 项</span>
            <el-button
                type="text"
                @click="clearSelect"
            >清除</el-button>
        </div>
    </div>
    <div
        class="dataList"
        style="margin-bottom: -20px"
    >
        <el-table
            ref="multipleTableRef"
            :data="dataList"
            style="width: 100%"
            :row-key="getRowKey"
            @selection-change="handleSelectionChange"
            border
            size="small"
            :height="hHeight - 140 + 'px'"
        >
            <el-table-column
                type="selection"
                width="55"
                align="center"
                :reserve-selection="true"
            />
            <el-table-column
                label="所属单位"
                prop="depId"
                align="center"
                width="72"
            >
                <template #default="scope">
                    <div>{{ depIdName(scope.row.depId) }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="设备名称"
                prop="facilityName"
                align="center"
                width="122"
            />
            <el-table-column
                label="设备分类"
                prop="facilitySort"
                align="center"
                width="72"
            />
            <el-table-column
                label="设备分级"
                prop="facilityLevel"
                align="center"
                width="66"
            />
            <el-table-column
                label="规格型号"
                prop="specificationModel"
                align="center"
                width="140"
            />
            <el-table-column
                label="设备唯一识别码"
                prop="facilityNumber"
                align="center"
                width="160"
            />
            <el-table-column
                label="设备地点"
                prop="facilityLocations"
                align="center"
                width="132"
            />
            <el-table-column
                label="资产编号"
                prop="assetNumber"
                width="66"
                align="center"
            />
            <el-table-column
                label="设备状态"
                prop="facilityState"
                align="center"
                width="72"
            >
                <template #default="scope">
                    <div>{{ facilityStateName(scope.row.facilityState) }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="数量"
                prop="facilityNumbers"
                align="center"
                width="50"
            />
            <el-table-column
                label="单位"
                prop="unit"
                align="center"
                width="50"
            />
            <el-table-column
                label="供应商/厂家"
                prop="facilitySupplier"
                width="142"
                align="center"
            />
            <el-table-column
                label="是/否纳入特许经营权"
                prop="franchising"
                width="78"
                align="center"
            />
            <el-table-column
                label="采购时间"
                prop="purchaseTime"
                width="90"
                align="center"
            />
            <el-table-column
                label="开始使用时间"
                prop="startTime"
                width="90"
                align="center"
            />
            <el-table-column
                label="主要技术参数"
                prop="technicalParameter"
                width="400"
                align="center"
            />
        </el-table>

        <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100, 200]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="equipmentPagination"
        />
    </div>
</template>
  
  <script setup>
import equipmentHttp from "@/https/equipment.js";
import labelHttp from "@/https/label.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import moment from "moment";
import { defineProps, nextTick, onMounted, reactive, ref, watch } from "vue";
// 传入数据¸
const props = defineProps({
    currentdataList: {
        type: Array,
        default: [],
    },
});
const emit = defineEmits(["dataChager"]);
const currentMonth = ref(new Date());
const currentMonthDays = ref(0);
currentMonthDays.value = moment(currentMonth.value, "YYYY-MM").daysInMonth();
watch(currentMonth, (val) => [
    (currentMonthDays.value = moment(val, "YYYY-MM").daysInMonth()),
]);
let searchForm = reactive({
    assetNumber: "",
    depId: "",
    facilityLevel: "",
    facilityLocations: "",
    facilityName: "",
    facilitySort: "",
    facilityState: "",
    facilitySupplier: "",
    specificationModel: "",
    tagName: "",
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;
let equipmentOverview = ref({});
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const batchAdddepIdList = ref([
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
]);
const depIdName = (id) => {
    return id == "1"
        ? "公司"
        : id == "2"
            ? "星沙厂"
            : id == "3"
                ? "城西厂"
                : id == "4"
                    ? "城北厂"
                    : id == "5"
                        ? "城南厂"
                        : "城东厂";
};
const facilityStateName = (id) => {
    return id == "1"
        ? "在用"
        : id == "2"
            ? "备用"
            : id == "3"
                ? "维修"
                : id == "4"
                    ? "报废"
                    : "其他";
};
const facilityLevelList = ref([
    { label: "全部", value: "" },
    { label: "A", value: "A" },
    { label: "B", value: "B" },
    { label: "C", value: "C" },
    { label: "其他", value: "其他" },
]);
const facilitySortList = ref([]);
const facilityStateList = ref([
    { label: "在用", value: "1" },
    { label: "备用", value: "2" },
    { label: "维修", value: "3" },
    { label: "报废", value: "4" },
    { label: "其他", value: "5" },
]);
const dataList = ref([]);

const depIdChange = () => {
    searchForm.facilitySort = "";
    searchForm.tagName = ''
    getFacilitySort();
    getBatchlabelListSelect();
};

const hHeight = ref(0);
onMounted(() => {
    hHeight.value = document.documentElement.clientHeight - 350;
    search();
    getFacilitySort();
    getBatchlabelListSelect();
});
const labelList = ref([])
const getBatchlabelListSelect = async () => {
    let params = {
        depId: searchForm.depId == '1' ? '' : searchForm.depId,
        tagName: "",
        pageNo: 1,
        pageSize: 10000,
    }
    const res = await labelHttp.tagPageList(params);
    if (res.data.code === 200) {
        labelList.value = res.data.data.records;
    }
}
const getFacilitySort = () => {
    equipmentHttp.getFacilitySort(searchForm.depId).then((res) => {
        facilitySortList.value = [];
        res.data.data.forEach((item) => {
            facilitySortList.value.push({
                label: item,
                value: item,
            });
        });
    });
};
const facilitySituation = () => {
    equipmentHttp.facilitySituation(searchForm.depId).then((res) => {
        if (res.data.code == 200) {
            console.log(res.data);
            nextTick(() => {
                equipmentOverview.value = res.data.data;
            });
        }
    });
};
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
    console.log(`current page: ${val}`);
};
let total = ref(100);
const search = () => {
    equipmentHttp.queryFacility(searchForm).then((res) => {
        if (res.data.code == 200) {
            dataList.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
    facilitySituation();
};
const reset = () => {
    searchForm = {
        assetNumber: "",
        depId: "",
        facilityLevel: "",
        facilityLocations: "",
        facilityName: "",
        facilitySort: "",
        facilityState: "",
        facilitySupplier: "",
        specificationModel: "",
        tagName: "",
        pageNo: "1",
        pageSize: "10",
    };
    search();
};
const multipleSelection = ref([]);
if (props.currentdataList.length > 0) {
    multipleSelection.value = props.currentdataList;
}
console.log(multipleSelection.value);
const handleSelectionChange = (val) => {
    console.log(val);
    emit("dataChager", val);
    multipleSelection.value = val;
};
const getRowKey = (row) => {
    return row.id;
};
const multipleTableRef = ref()
const clearSelect = () => {
    multipleTableRef.value.clearSelection();
};
</script>
  
  <style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.options {
    margin: 20px 0 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    .ml-2 {
        margin-right: 10px;
    }
}
.preview {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.equipmentPagination {
    justify-content: flex-end;
    margin-top: 10px;
    margin-bottom: 20px;
}
.grid-content {
    line-height: 2;
}
:deep .el-table__header .cell {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.choiceListNumb {
    line-height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
        margin-right: 10px;
    }
}
</style>
  